<template>
  <div class="top-navbar2-component" :style="componentStyle">
    <div class="navbar-container">
      <div class="navbar-brand">
        <img v-if="Logo图片" :src="Logo图片" alt="Logo" class="brand-logo">
        <span v-else class="brand-name">{{ 品牌名称 }}</span>
      </div>
      
      <div class="navbar-links">
        <div 
          v-for="(item, index) in 导航链接" 
          :key="index"
          class="nav-link"
          :class="{ 'active': index === 0 }"
        >
          {{ item }}
        </div>
      </div>
      
      <div class="navbar-buttons" v-if="显示按钮">
        <button class="login-button">{{ 登录按钮文字 }}</button>
        <button class="signup-button" :style="{backgroundColor: 主题颜色, borderColor: 主题颜色}">{{ 注册按钮文字 }}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopNavbar2Component',
  componentName: '顶部导航栏2',
  icon: 'el-icon-s-grid',
  defaultProps: {
    背景颜色: '#ffffff',
    文字颜色: '#333333',
    主题颜色: '#1890ff',
    品牌名称: 'Brand',
    Logo图片: '',
    导航链接: ['首页', '功能', '价格', '博客', '联系我们'],
    显示按钮: true,
    登录按钮文字: '登录',
    注册按钮文字: '注册'
  },
  props: {
    背景颜色: {
      type: String,
      default: '#ffffff'
    },
    文字颜色: {
      type: String,
      default: '#333333'
    },
    主题颜色: {
      type: String,
      default: '#1890ff'
    },
    品牌名称: {
      type: String,
      default: 'Brand'
    },
    Logo图片: {
      type: String,
      default: ''
    },
    导航链接: {
      type: Array,
      default: () => ['首页', '功能', '价格', '博客', '联系我们']
    },
    显示按钮: {
      type: Boolean,
      default: true
    },
    登录按钮文字: {
      type: String,
      default: '登录'
    },
    注册按钮文字: {
      type: String,
      default: '注册'
    }
  },
  computed: {
    componentStyle() {
      return {
        backgroundColor: this.背景颜色,
        color: this.文字颜色,
        width: '100%',
        height: '100%',
        boxSizing: 'border-box'
      };
    }
  }
};
</script>

<style scoped>
.top-navbar2-component {
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.1);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 10px 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 36px;
  max-width: 120px;
  object-fit: contain;
}

.brand-name {
  font-size: 1.5rem;
  font-weight: 600;
}

.navbar-links {
  display: flex;
  gap: 30px;
}

.nav-link {
  font-size: 1rem;
  cursor: pointer;
  padding: 5px 0;
  position: relative;
}

.nav-link.active {
  color: v-bind(主题颜色);
  font-weight: 500;
}

.navbar-buttons {
  display: flex;
  gap: 10px;
}

.login-button {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.login-button:hover {
  background-color: #f5f5f5;
}

.signup-button {
  padding: 8px 16px;
  color: white;
  border: 1px solid;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.signup-button:hover {
  opacity: 0.9;
}
</style>